<template>
    <div class="choice-wrapper">
        <!-- 左侧品牌 -->
        <div class="choice-left" ref="left">
            <ul>
                <li v-for="(item,index) in brand" class="item" :class="{'active':index+1==current}" @click="showModel(item.brand_id)">
                    <p>{{item.brand}}</p>
                </li>
            </ul>
        </div>
        <!-- 右侧型号 -->
        <div class="choice-right" ref="right">
            <ul v-show="model">
                <li class="item" v-for="(item, index) in model">
                    <router-link :to="'/hsfault?bid='+item.brand_id+'&mid='+item.model_id" class="item-link">
                        <span class="icon iconfont icon-huo" v-show="index<3"></span>
                        <p>{{item.brand}} {{item.model}}</p>
                    </router-link>
                </li>
            </ul>
            <div class="no-model" v-show="model && model.length==0" ref="noModel">
                <img width="80" height="80" src="../../common/image/sorry.gif">
                <div class="text">当前手机的型号不存在...</div>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import {toast, indicator} from '../../base/js/toast.js'
export default {
    data() {
        return {
            current: parseInt( this.$route.query.id || this.initId ), //路由id,当前展示的是哪一个品牌
        }
    },
    props: {
        brand: {    //品牌
            type: Array,
            default: []
        },
        model: {    //型号
            type: Array,
            default: []
        },
        initId: {   //初始id
            type: Number,
            default: 1
        }
    },
    mounted(){
        //隐藏没有型号提示的图标
        this.$refs.noModel.style.display="none"
        //初始化滑动组件
        this._initScroll()  
    },
    methods: {
        //初始化better-scroll
		_initScroll(){
			//左侧菜单栏(DOM元素，json配置对象)
			this.leftScroll = new BScroll(this.$refs.left, {
				click: true,		//可点击
			})
			//右侧食品栏(DOM元素，json配置对象)
			this.rightScroll = new BScroll(this.$refs.right, {
				click: true,		//可点击
				probeType: 3,		//探针，记录滚动位置
			})
		},
        //点击获取新的型号
        showModel(id) {
            this.current = id
            //向父元素派发方法，获取型号
            this.$emit('toget-model', id)
            //重新刷新列表
            this.rightScroll.refresh()
        }
    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";

    //主体内容
    .choice-wrapper{
        height:100%;
        width:100%;
        overflow:hidden;
        display:flex;
        //左侧
        .choice-left{
            flex:0 0 100px;
            overflow:hidden;
            background:@color-gray-bg;
            .item{
                height:50px;
                line-height:50px;
                color:#5c626d;
                font-size:14px;
                text-indent:23px;
                padding:2px 0;
                box-sizing:border-box;
                h1{
                    border-left:2px solid rgba(0,0,0,0);
                }
                &.active{
                    background:#fff;
                    color:#000;
                    font-weight:700;
                    p{
                        border-left:2px solid @color-yellow;
                    }
                }
            }
        }
        //右侧
        .choice-right{
            flex:1;
            overflow:hidden;
            .item{
                height:50px;
                line-height:50px;
                background:#fff;
                font-size:14px;
                .item-link{
                    position:relative;
                    span{
                        width:45px;
                        text-align: center;
                        line-height: 50px;
                        color:#f00;
                        position:absolute;
                        top:0;
                        left:0;
                        font-size:18px
                    }
                    p{
                        color:#333;
                        text-indent:45px;
                    }
                }
                &:nth-child(2){
                    .item-link{
                        span{
                            color:#ef00bb;
                        }
                    }
                }
                &:nth-child(3){
                    .item-link{
                        span{
                            color:#62ade3;
                        }
                    }
                }
            }
            .no-model{
                text-align:center;
                margin-top:30px;
                img{}
                .text{
                    font-size:12px;
                    margin-top:20px;
                    color:#666
                }
            }
        }
    }
</style>
